<template>
    <div class>
        {{ tag }}
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad">
            <van-cell v-for="item in list" :key="item" :title="item" />
        </van-list>
    </div>
</template>

<script>
import { getGoosByTag } from "../api/goods"
import { List } from "vant/es/list"
import { Cell } from "vant/es/cell"
import "vant/es/list/style"
import "vant/es/cell/style"
import { ref } from "@vue/reactivity"

export default {
    props: {
        tag: {
            type: String
        }
    },
    components: {
        [List.name]: List,
        [Cell.name]: Cell
    },
    setup(props) {
        const list = ref([]);
        const loading = ref(false);
        const finished = ref(false);

        const onLoad = () => {
            getGoosByTag(props.tag).then(res => {
                for (let item of res.result.list) {
                    list.value.push(item.goods_name)
                }
                // 加载状态结束
                loading.value = false;
                // 数据全部加载完成,当接口返回的数据小于每页的数据的时候，就没有显示没有更多了
                if (list.value.length >= 20) {
                    finished.value = true;
                }
            })
        }
        return {
            list,
            onLoad,
            loading,
            finished,
        };
    }
}

</script>
